<template>
    <div class="receive-container">
        <header class="header">
            <div class="header-left">
                <button class="back-btn" @click="router.push('/index')">
                    <i class="fas fa-arrow-left"></i>
                </button>
                入库扫描
            </div>
            <div class="header-right">
                <select class="printer-select" v-model="printer" style="padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1.1rem; background-color: white; color: #333;">
                    <option value="" disabled>选择打印机</option>
                    <option v-for="printer in printers" :key="printer" :value="printer">
                        {{ printer }}
                    </option>
                </select>
            </div>
        </header>

        <div class="scan-section">
            <div class="scan-input">
                <input v-model="trackingNumber" @keyup.enter="scanPackage" placeholder="扫描或输入快递单号" autofocus />
                <button @click="scanPackage" style="margin: auto 0">扫描</button>
            </div>
        </div>

        <!-- 包裹信息弹窗 -->
        <div v-if="showDialog" class="dialog-overlay">
            <div class="dialog">
                <h3>包裹信息</h3>
                <div class="parcel-info">
                    <div class="info-row">
                        <label style="width: 100px; display: inline-block;">订单号：</label>
                        <span style="font-size: 1.4rem;">{{ packageInfo?.po_number }}</span>
                    </div>
                    <div class="info-row">
                        <label style="width: 100px; display: inline-block;">快递单号：</label>
                        <span style="font-size: 2.5rem;">{{ packageInfo?.tracking_number }}</span>
                    </div>
                    <div class="info-row">
                        <div>
                            <label style="width: 100px; display: inline-block;">重量：</label>
                            <input v-model="packageInfo.package_weight" type="number" style="text-align: center" />
                            <span style="margin-left: 10px;">KG</span>
                        </div>
                    </div>
                    <div class="info-row">
                        <div style="display: flex; gap: 0px; align-items: center;">
                            <label style="width: 100px; display: inline-block;">尺寸：</label>
                            <input v-model="packageInfo.package_length" type="number" style="text-align: center" />
                            <span style="margin-left: 10px; margin-right: 10px;">x</span>
                            <input v-model="packageInfo.package_width" type="number" style="text-align: center" />
                            <span style="margin-left: 10px; margin-right: 10px;">x</span>
                            <input v-model="packageInfo.package_height" type="number" style="text-align: center" />
                            <span style="margin-left: 10px;">CM</span>
                        </div>
                    </div>
                </div>
                <div class="dialog-buttons">
                    <button class="primary" :disabled="confirmLoading" @click="confirmPackage">{{ confirmLoading ? '请稍后...' : '确认并打印' }}</button>
                    <button class="cancel" :disabled="confirmLoading" @click="showDialog = false">取消</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import http from "../common/http";
import router from "../router";
import { message } from "@tauri-apps/plugin-dialog";
import { invoke } from '@tauri-apps/api/core';

const trackingNumber = ref('');
const packageInfo = ref(null);
const showDialog = ref(false);
const printers = ref([]);
const printer = ref('');
const confirmLoading = ref(false);

// 组件挂载时获取打印机列表
onMounted(() => {
    printer.value = localStorage.getItem('printer') || '';

    getPrinters();
});

watch(printer, (newVal) => {
    localStorage.setItem('printer', newVal);
});

// 获取打印机列表
const getPrinters = async () => {
    try {
        const datas = await invoke('get_printers');

        printers.value = datas;
    } catch (error) {
        await message('获取打印机列表失败: ' + error, { title: '错误', kind: 'error' });
    }
};

const scanPackage = async () => {
    console.log(trackingNumber);
    if (!trackingNumber.value) return;

    try {
        const res = await http.get(`admin/warehouse/inbound/scan/${trackingNumber.value}`);

        packageInfo.value = res.data.data;
        showDialog.value = true;
        trackingNumber.value = ''; // 清空输入框，准备下一次扫描
    } catch (error) {
        console.log(error);
        await message(`扫描失败：${error.message}`, {
            title: '提示',
            kind: 'error'
        });
    }
};

const confirmPackage = async () => {
    confirmLoading.value = true;
    try {
        var res = await http.post("admin/warehouse/inbound/confirm", {
            package_id: packageInfo.value.package_id,
            weight: packageInfo.value.package_weight,
            length: packageInfo.value.package_length,
            width: packageInfo.value.package_width,
            height: packageInfo.value.package_height
        });

        if (res.data.code != 0) {
            return await message(res.data.msg, {
                title: '提示',
                kind: 'error'
            });
        }

        try {
            await invoke('print_pdf', {
                printerName: printer.value,
                pdf: res.data.data.label
            });

            if (res.data.data.hold) {
                await message("打印完成, 包裹需暂留置，并通知易通安达客服人员复核计费重量，并向客户加收费用后方可进行后续操作。", { title: '提示', kind: 'info' });
            } else {
                await message("打印完成", { title: '提示', kind: 'info' });
            }

            showDialog.value = false;
            packageInfo.value = null;
        } catch (error) {
            await message('打印失败：' + error, { title: '提示', kind: 'error' });
        }
    } catch (error) {
        await message('确认失败：' + error.message, { title: '提示', kind: 'error' });
    } finally {
        confirmLoading.value = false;
    }
};
</script>

<style scoped>
.receive-container {
    width: 100%;
    min-height: 100vh;
    font-family: 'Arial', sans-serif;
}

.page-header {
    margin-bottom: 2rem;
}

.header {
    background-color: #fff;
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #515050;
}

.back-btn {
    border: none;
    font-size: inherit;
    background-color: transparent;
    color: #515050;
}

.header-left {
    font-size: 1.5rem;
    font-weight: bold;
}

.scan-section {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.scan-input {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 500px;
}

.scan-input input {
    flex: 1;
    padding: 0.8rem;
    font-size: 1.1rem;
    border: 2px solid #ddd;
    border-radius: 4px;
}

.scan-input button {
    padding: 0.8rem 2rem;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
}

.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialog {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
}

.parcel-info {
    margin: 1.5rem 0;
}

.info-row {
    display: flex;
    margin-bottom: 1rem;
    align-items: center;
}

.info-row label {
    width: 100px;
}

.info-row input {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.6rem;
    width: 120px;
}

.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

.dialog-buttons button {
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.4rem;
    border: 1px solid #ddd;
}

.dialog-buttons button.primary {
    background-color: #1976D2;
    color: white;
}

.dialog-buttons button.cancel {
    background-color: #fff;
    color: black;
}

@media (prefers-color-scheme: dark) {
    .dialog {
        background-color: #1a1a1a;
        color: white;
    }

    .scan-input input,
    .info-row input {
        background-color: #333;
        color: white;
        border-color: #444;
    }
}
</style>